<template>
    <div class="navbar">
   <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="$route.path"
        text-color="#fff"
        :default-openeds="['/students']"
      :router="true"
      >
  <Menu :menuList="menuList"/>
        <!-- <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="2">
         <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="3">
         <el-icon><UserFilled /></el-icon>
          <span>角色管理</span>
        </el-menu-item>
              <el-sub-menu index="4">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>学员</span>
          </template>
          <el-menu-item index="4-1">
         <el-icon><School /></el-icon>
          <span>学校管理</span>
        </el-menu-item>
        <el-menu-item index="4-2">
         <el-icon><Memo /></el-icon>
          <span>专业管理</span>
        </el-menu-item>
        <el-menu-item index="4-3">
        <el-icon><OfficeBuilding /></el-icon>
          <span>班级管理</span>
        </el-menu-item>
        <el-menu-item index="4-4">
          <el-icon><Smoking /></el-icon>
          <span>学生管理</span>
        </el-menu-item>
        </el-sub-menu>-->
      </el-menu> 
    </div>
</template>
<script setup lang="ts">
import menuList from '@/config/menuConfig';
import Menu from './menu/index.vue';
// 引入路由对象
import { useRoute } from 'vue-router';
import type { MenuData } from './type/type';
const $route =useRoute();
// 引入用户小仓库
import useUserStore from '@/store/modules/user';
const userStore = useUserStore(); 
// 判断当前用户是否拥有此权限，判断当前这个菜单是否需要展示
const  hasAuth = (item:MenuData)=>{
// 从当前菜单中解析出index和isPublic
const {index,isPublic} = item;
// 获取当前登录用户的权限列表
const menus =userStore.user?.role.menus;
// 获取当前登录的用户的用户名
const username=userStore.user?.username
// 当前菜单需要展示的条件
/* 
1.如果登录的用户是超级管理员
2.isPublic 为true
3.当前登录的用户权限数组中包含此项
*/
if( username =="admin"|| isPublic == true || menus?.indexOf(index)!= -1 ){
    return true
}else{
    return false
}
};
// 定义一个数组，用来存储所有需要展示的菜单项（拥有权限的菜单项）
let menuNodes:any[]=[];
// 过滤需要展示的菜单向
const getMenuNodes=()=>{
    // 循环安里所有的亲单数组，，拿每一个菜单项对象调用nasAuth方法判断，如果返回true代表需要展示，就添加到menumodes中，那么循环结束之后menumodes数组中存储的就是所有需要展示的菜单
    menuList.forEach(item=>{
        // 一级菜单
        if(!item.children){
            // 拥有此权限，需要展示这个菜单项
            if(hasAuth(item)){
                menuNodes.push(item)
            }
        }else{
            // 定于数组用户存储子级菜单项
            let arr:any[]=[]
            item.children.forEach(child=>{
                if(hasAuth(child)){
                    arr.push(child)
                }
            })
            let obj = {...item,children:arr}
            menuNodes.push(obj)
        }
    })
}


getMenuNodes()
</script>

<style scoped>
.el-menu{
  border: 0;
}
</style>